﻿<script src="~/Scripts/SettingsControllers/UserSettingsPageController.js"></script>
<div ng-controller="UserSettingsController">
    <div class="bg-white p-20">
        <div class="page-header">
            <h1 class="mt-0 fs-26 mb-10 text-primary">My Settings</h1>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div role="tabpanel">
                    <ul class="nav nav-tabs nav-justified mb-15" role="tablist">
                        <li role="presentation" class="active waves-effect"><a href="#home5" id="home-tab5" role="tab" data-toggle="tab" aria-controls="home5" aria-expanded="true">Settings</a></li>
                        <li role="presentation" class="waves-effect"><a href="#profile5" role="tab" id="profile-tab5" data-toggle="tab" aria-controls="profile5" aria-expanded="false">Change Password</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="home5" aria-labelledby="home-tab5">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="bg-white bs-0 mb-20">
                                        <div class="bg-cover text-center" style="background-image: url('{{settings.CoverPicture}}'); height: 180px;">
                                            <a href="javascript:void(0)" style="display: inline-block; border-radius: 50%; padding: 3px; background-color: #fff; margin-top: 110px">
                                                <img class="img-circle" src="~/Images/_ErrorImage.png" actual-image="{{settings.UserPicture}}" on-error-src="~/Images/_LoadImage.jpg" height="100px" width="100px">
                                            </a>
                                        </div>
                                        <div class="text-center mt-20 p-20">
                                            <h3 class="mt-0 mb-5">@ViewBag.Name</h3>
                                            <span class="block text-purple fs-16">@ViewBag.UserTypeName</span>
                                            <p class="mt-5 mb-0">
                                                Last Login : @ViewBag.LastLogin
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-8" style="background-color: #f3f3f3; padding: 1%;">
                                    <div class="row pr-20">
                                        <button type="button" ng-click="toggle()" class="btn btn-circle btn-sm btn-primary waves-effect waves-circle waves-float waves-effect pull-right"><i class="zmdi zmdi-edit"></i></button>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">Date Format</div>
                                        <div class="col-md-8"><span>{{settings.DateFormat.DateFormatName}}</span></div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">Color</div>
                                        <div class="col-md-8"><span>{{settings.Color}}</span></div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">Language</div>
                                        <div class="col-md-8"><span>{{settings.Language.LanguageName}}</span></div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">Notification Sound</div>
                                        <div class="col-md-8">
                                            <label class="checkbox-inline checkbox-custom mr-15">
                                                <span ng-show="settings.NotificationSound" class="btn-flat btn-success">Active</span>
                                                <span ng-hide="settings.NotificationSound"  class="btn-flat btn-danger">In Active</span>
                                            </label>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">Email Notification</div>
                                        <div class="col-md-8">
                                            <label class="checkbox-inline checkbox-custom mr-15">
                                                <span ng-show="settings.EmailNotification" class="btn-flat btn-success">Active</span>
                                                <span ng-hide="settings.EmailNotification"  class="btn-flat btn-danger">In Active</span>
                                            </label>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">Fixed Header</div>
                                        <div class="col-md-8">
                                            <label class="checkbox-inline checkbox-custom mr-15">
                                                <span ng-show="settings.fixedHead" class="btn-flat btn-success">Active</span>
                                                <span ng-hide="settings.fixedHead"  class="btn-flat btn-danger">In Active</span>
                                            </label>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">Country</div>
                                        <div class="col-md-8"><span>{{settings.Country.CountryName}}</span></div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">State</div>
                                        <div class="col-md-8"><span>{{settings.States.StateName}}</span></div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">Address Line 1</div>
                                        <div class="col-md-8"><span>{{settings.DetaultAddress1}}</span></div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">Address Line 2</div>
                                        <div class="col-md-8"><span>{{settings.DetaultAddress2}}</span></div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">Pincode</div>
                                        <div class="col-md-8"><span>{{settings.DetaultPinCode}}</span></div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="row p-5">
                                        <div class="col-md-4">Settings Percentage</div>
                                        <div class="col-md-8"><span>{{settings.SettingPercentage}}</span></div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="profile5" aria-labelledby="profile-tab5">
                            <form name="fromChangePassword" novalidate>
                                <div class="form-group">
                                    Old Password
                                    <input type="password" class="form-control" ng-model="User.OldPassword" ng-required="true" />
                                </div>
                                <div class="form-group">
                                    New Password
                                    <input type="password" class="form-control" name="NewPassword" ng-minlength="8" ng-maxlength="12" ng-model="User.NewPassword" ng-required="true" />
                                    <p class="error" ng-show="fromChangePassword.NewPassword.$error.minlength">New password is too short (Min 8)</p>
                                    <p class="error" ng-show="fromChangePassword.NewPassword.$error.maxlength">New password is too long (Max 12)</p>
                                </div>
                                <div class="form-group">
                                    Confirm Password
                                    <input type="password" name="ConfirmPassword" class="form-control" ng-minlength="8" ng-maxlength="12" ng-model="User.ConfirmPassword" ng-required="true" />
                                    <p class="error" ng-show="fromChangePassword.ConfirmPassword.$error.minlength">New password is too short (Min 8)</p>
                                    <p class="error" ng-show="fromChangePassword.ConfirmPassword.$error.maxlength">New password is too long (Max 12)</p>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary pull-right" ng-disabled="fromChangePassword.$invalid" ng-click="changePassword()">Change Password</button>
                                </div>
                                <br />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white bs-0 mb-20">
        <div class="modal fade bs-example-modal-panel" tabindex="-1" id="UserSettings" role="dialog" aria-labelledby="myPanelModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myAnimationModalLabel">{{title}}</h4>
                    </div>
                    <form name="fromvalidate" novalidate>
                        <div class="modal-body">
                            <form name="frmvalidate" novalidate>

                                <div class="form-group">
                                    <label>Date Format</label>
                                    <select ng-model="settings.DateFormateId"
                                        ng-options="obj.DateFormateId as obj.DateFormatName for obj in Dateformat"
                                        class="form-control"
                                        ng-required="true"
                                        id="Dateformat">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Color</label>
                                    <select class="form-control" ng-model="settings.Color">
                                        <option value="blue">Blue</option>
                                        <option value="green">Green</option>
                                        <option value="aqua">Aqua</option>
                                        <option value="yellow">Yellow</option>
                                        <option value="pink">Pink</option>
                                        <option value="purple">Purple</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Date Language</label>
                                    <select ng-model="settings.LanguageId"
                                        ng-options="obj.LanguageId as obj.LanguageName for obj in Languages"
                                        class="form-control"
                                        ng-required="true"
                                        id="Languages">
                                    </select>
                                </div>
                                <div class="form-group">
                                    Notification Position
                                    <select class="form-control" ng-model="settings.NotificationPosition">
                                        <option value="toast-top-right">Top Right</option>
                                        <option value="toast-bottom-right">Bottom Right</option>
                                        <option value="toast-bottom-left">Bottom Left</option>
                                        <option value="toast-top-left">Top Left</option>
                                        <option value="toast-top-full-width">Top full width</option>
                                        <option value="toast-bottom-full-width">Bottom full width</option>
                                        <option value="toast-top-center">Top Center</option>
                                        <option value="toast-bottom-center">Bottom Center</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Time Format</label>
                                    <select class="form-control" ng-model="settings.TimeFormat">
                                        <option value="">Please Select</option>
                                        <option>12</option>
                                        <option>24</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="checkbox-inline checkbox-custom mr-15">
                                        <input type="checkbox" value="remember" id="exampleCheckboxEmail" ng-model="settings.EmailNotification" checked="{{settings.EmailNotification}}">
                                        <label for="exampleCheckboxEmail">Email Notification</label>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label class="checkbox-inline checkbox-custom mr-15">
                                        <input type="checkbox" value="remember" id="exampleCheckboxSound" ng-model="settings.NotificationSound" checked="{{settings.NotificationSound}}">
                                        <label for="exampleCheckboxSound">Notification Sound</label>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label class="checkbox-inline checkbox-custom mr-15">
                                        <input type="checkbox" value="remember" id="exampleCheckboxRemember" ng-model="settings.fixedHead" checked="{{settings.fixedHead}}">
                                        <label for="exampleCheckboxRemember">Fixed Header</label>
                                    </label>
                                </div>
                                <div class="form-group">
                                    Default Country
                                    <select ng-model="settings.CountryId"
                                        ng-options="obj.CountryId as obj.CountryName for obj in countries"
                                        ng-change="getCountryStates()"
                                        class="form-control"
                                        ng-required="true"
                                        id="country">
                                    </select>
                                </div>
                                <div class="form-group">
                                    Default State
                                    <select ng-model="settings.StateId"
                                        ng-options="obj.StateId as obj.StateName for obj in states"
                                        ng-change="getCountryStates()"
                                        class="form-control"
                                        ng-required="true"
                                        id="states">
                                    </select>
                                </div>
                                <div class="form-group">
                                    Default Address Line 1
                                    <textarea class="form-control" ng-model="settings.DetaultAddress1"></textarea>
                                </div>
                                <div class="form-group">
                                    Default Address Line 2
                                    <textarea class="form-control" ng-model="settings.DetaultAddress2"></textarea>
                                </div>
                                <div class="form-group">
                                    Default Pincode
                                    <textarea class="form-control" ng-model="settings.DetaultPinCode"></textarea>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            User Picture
                                            <input type="file" onchange="angular.element(this).scope().fileChangedProfile(event)" class="filestyle" data-buttonname="btn-primary" data-iconname="zmdi zmdi-file-text" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <img class="media-object mo-lg img-responsive mCS_img_loaded" src="~/Images/_ErrorImage.png" actual-image="{{settings.UserPicture}}" on-error-src="~/Images/_LoadImage.jpg">
                                    </div>
                                    <div class="clear"> </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            Cover Picture
                                            <input type="file" onchange="angular.element(this).scope().fileChangedCover(event)" class="filestyle" data-buttonname="btn-primary" data-iconname="zmdi zmdi-file-text" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <img class="media-object mo-lg img-responsive mCS_img_loaded" src="~/Images/_ErrorImage.png" actual-image="{{settings.CoverPicture}}" on-error-src="~/Images/_LoadImage.jpg">
                                    </div>
                                    <div class="clear"> </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" ng-disabled="fromvalidate.$invalid || requeststatus" ng-click="save()">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

